<!--
 * @Description:
 * @Author: 崔堂袁
 * @Date: 2021-04-30 15:29:05
 * @LastEditTime: 2021-05-04 23:34:10
-->
<template>
  <div class="tools">
    <a-collapse v-model:activeKey="activeKey"
                :bordered="false"
                accordion>
      <a-collapse-panel key="1"
                        :header="$t('lang.newScenePage.addModels')">
        <CreateModels @createMode="createMode" />
      </a-collapse-panel>
      <a-collapse-panel key="2"
                        :header="$t('lang.newScenePage.sceneSetting')">
        <SceneSetting />
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script>
import CreateModels from './CreateModels'
import SceneSetting from './SceneSetting'
import { ref, getCurrentInstance } from 'vue'
export default {
  components: {
    CreateModels,
    SceneSetting
  },
  setup () {
    const { proxy } = getCurrentInstance()
    const activeKey = ref(['1'])

    const createMode = () => {
      proxy.$emit('createMode')
    }
    return {
      activeKey,
      createMode
    }
  }
}
</script>

<style lang='less' scoped>
.tools {
  width: 100%;
  /deep/.ant-collapse-header {
    background-color: #f1f3f4;
  }
  /deep/.ant-collapse-content-box {
    background-color: @bgColor;
    padding: 5px 0;
  }
}
</style>
